<template>
  <MenuLayout>
    <template #content>
      <div>
        <div class="row-spaceb mg20">
          <p class="fwbold fs-md">· 服务券配额申请企业详情</p>
          <el-button type="danger" size="medium" plain @click="$router.back()">返回</el-button>
        </div>
        <el-divider></el-divider>
        <!--        企业基本信息-->
        <div class="pd15">
          <div class="fwbold fs-md">· 企业基本信息</div>
          <el-row class="mt15" :gutter="20" v-for="(item, index) in Object.keys(companyInfo)" :key="index">
            <el-col :span="4" class="tr fs-md" style="color: gray">{{ companyInfoLabel[item] }} :</el-col>
            <el-col :span="120" class="tl color-black2 fs-md fwbold" v-if="item == 'legalPersonCardNo'">
              {{ hiddenCardNo(companyInfo[item]) }}
            </el-col>
            <el-col :span="120" class="tl color-black2 fs-md fwbold" v-else>{{ companyInfo[item] }}</el-col>
          </el-row>
        </div>
        <el-divider></el-divider>
        <!--        企业类型-->
        <div class="mt20 center">
          <el-table size="medium" align="center" :row-style=" {height:'30px'}" :data="orderList" border class="width-20"
                    :span-method="tableSpanMethod"
                    :header-cell-style="{background:'rgb(252, 241, 231)',color:'#606266'}">
            <el-table-column prop="type" label="企业类型"></el-table-column>
            <el-table-column prop="bidAmt" label="自治区创新型中小企业" width="180px" align="center"></el-table-column>
            <el-table-column label="服务券类型" width="150px" align="center">
              <template slot-scope="scope">
                <p v-if="!scope.row.couponType">通用券</p>
              </template>
            </el-table-column>
          </el-table>
          <!--          补贴兑付申请表单-->
          <el-row :gutter="60" class="mt20 width-20">
            <el-col :span="12" class="tr"><i class="el-icon-warning color-red fs-md te mr20"></i><span class="fs-md">服务补贴累计发放：<span
                class="color-red">253万元</span></span></el-col>
            <el-col :span="12" class="tl"><span class="fs-md">服务补总额度剩余：<span
                class="color-red">3247万元</span></span></el-col>
          </el-row>
          <el-form :model="supplyData" label-suffix=":" ref="supplyForm" :rules="supplyDataRules" size="small"
                   label-width="140px" class="mt40 center width-20">
            <el-col :xs="12" :md="12" :sm="14">
              <el-form-item label="企业划型" prop="type">
                <el-select v-model="supplyData.type" clearable placeholder="-请选择-" class="width-24"></el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :md="12" :sm="14">
              <el-form-item label="服务券配额" prop="bidAmt">
                <el-input v-model="supplyData.bidAmt" disabled>
                  <template slot="append"><span class="color-red fwbold">元</span></template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :md="12" :sm="14" class="tl">
              <el-form-item label="审核结果" prop="result">
                <el-radio-group v-model="supplyData.result" clearable size="medium" fill="#D32521">
                  <el-radio label="1">审核通过</el-radio>
                  <el-radio label="0">审核不通过</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :md="12" :sm="14">
              <el-form-item label="审核意见">
                <el-input v-model="supplyData.remark" clearable placeholder="请输入审核意见"
                          class="width-24"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :md="12" :sm="14" class="center mt10 mb20">
              <el-button type="danger" size="medium" @click="submitSupply">提交申请</el-button>
            </el-col>
          </el-form>
        </div>
      </div>
    </template>
  </MenuLayout>
</template>
<script>
import MenuLayout from '@/components/MenuLayout'
import TimeLine from "@/components/timeLine.vue";

export default {
  data() {
    return {
      companyInfoLabel: {
        name: '企业名称/机构名称',
        no: '统一社会信用代码',
        legalPerson: '法定代表人姓名',
        legalPersonCardNo: '法定代表人证件号码',
        legalPersonTel: '法定代表人联系电话',
        createPerson: '经办人姓名',
        createPersonTel: '经办人联系电话'
      },
      companyInfo: {
        name: '服务商申请',
        no: true,
        legalPerson: '张三',
        legalPersonCardNo: '450105201912081203',
        legalPersonTel: '18112382122',
        createPerson: '李四',
        createPersonTel: '19177828129'
      },
      orderList: [
        {type: '一般工业中小企业', bidAmt: '2万', couponType: ''},
        {type: '自治区创新型中小企业', bidAmt: '5万', couponType: ''},
        {type: '国家中小企业特色产业集群内', bidAmt: '5万', couponType: ''},
        {type: '上两个年度新增进入统计名录库的规模以上企业', bidAmt: '5万', couponType: ''},
        {type: '自治区级制造业单项冠军', bidAmt: '10万', couponType: ''},
        {type: '专精特新中小企业', bidAmt: '10万', couponType: ''},
        {type: '国家级制造业单项冠军', bidAmt: '20万', couponType: ''},
        {type: '专精特新“小巨人”', bidAmt: '20万', couponType: ''}
      ],
      supplyData: {type: '', bidAmt: '', result: '', remark: ''},
      supplyDataRules: {
        type: [{required: true, message: '企业划型不能为空', trigger: 'change'}],
        bidAmt: [{required: true, message: '服务券配置不能为空'}],
        result: [{required: true, message: '审核结果不能为空', trigger: 'change'}]
      }
    }
  },
  computed: {},
  mounted() {
    let companyid = this.$route.query.id
  },
  components: {
    TimeLine,
    MenuLayout
  },
  methods: {
    hiddenCardNo(data = '') {
      return data.replace(/(.{6}).*(.{4})/, "$1********$2")
    },
    tableSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 1) {
        if (rowIndex == 0) {
          return [1, 1]
        } else if (rowIndex == 1) {
          return [3, 1]
        } else if (rowIndex == 4 || rowIndex == 6) {
          return [2, 1]
        }
      }
      if (columnIndex === 2) {
        return [8, 1]
      }
    },
    submitSupply() {
      this.$refs['supplyForm'].validate(valid => {
        if (valid) {
          this.$router.back()
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
$active-red-color: #D32521;
p {
  margin: 0;
  padding: 0;
}

:deep .el-divider--horizontal {
  margin: 12px 0;
}

:deep .el-radio__input.is-checked + .el-radio__label {
  color: $active-red-color;
}

:deep .el-radio__input.is-checked .el-radio__inner {
  border-color: $active-red-color;
  background-color: $active-red-color;
}
</style>
